<template>
	<view class="container">
		<view class="title">24小时降雨量等级示意</view>

		<view class="list">
			<view v-for="(item,index) in rainData" :key="index" class="list-item">
				<view class="info">
					<text class="rainfall">{{ item.rainfall }} mm</text>
					<text class="description">{{ getRainInfo(item.rainfall).description }}</text>
					<text class="level">等级: {{ getRainInfo(item.rainfall).levelText }}</text>
				</view>
				<!-- 使用 RainBar 组件 -->
				<view class="icon-container">
					<RainBar :rainfall="item.rainfall" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import RainBar from '@/components/RainBar.vue';

	export default {
		components: {
			RainBar
		},
		data() {
			return {
				rainData: [{
						rainfall: 0.2
					}, {
						rainfall: 0.4
					}, {
						rainfall: 0.6
					}, {
						rainfall: 0.9
					},
					{
						rainfall: 1
					}, {
						rainfall: 3
					}, {
						rainfall: 6
					}, {
						rainfall: 9
					},
					{
						rainfall: 10
					}, {
						rainfall: 14
					}, {
						rainfall: 18
					}, {
						rainfall: 24
					},
					{
						rainfall: 25
					}, {
						rainfall: 30
					}, {
						rainfall: 40
					}, {
						rainfall: 49
					},
					{
						rainfall: 50
					}, {
						rainfall: 60
					}, {
						rainfall: 80
					}, {
						rainfall: 99
					},
					{
						rainfall: 100
					}, {
						rainfall: 120
					}, {
						rainfall: 150
					}, {
						rainfall: 199
					},
					{
						rainfall: 200
					}, {
						rainfall: 250
					}, {
						rainfall: 300
					},
				]
			};
		},
		methods: {
			getRainInfo(r) {
				if (r >= 0.2 && r <= 0.9) return {
					description: '零星小雨',
					levelText: '零、一级'
				};
				if (r >= 1 && r <= 9.9) return {
					description: '小雨',
					levelText: '一、二级'
				};
				if (r >= 10 && r <= 24.9) return {
					description: '中雨',
					levelText: '二、三、四级'
				};
				if (r >= 25 && r <= 49.9) return {
					description: '大雨',
					levelText: '一、二、三、四级'
				};
				if (r >= 50 && r <= 99.9) return {
					description: '暴雨',
					levelText: '一、二、三、四级'
				};
				if (r >= 100 && r <= 199.9) return {
					description: '大暴雨',
					levelText: '四、五级'
				};
				if (r >= 200) return {
					description: '特大暴雨',
					levelText: '五级'
				};
				return {
					description: '无降水',
					levelText: '无'
				};
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	.title {
		font-size: 28rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.list-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.info {
		flex: 1;

		.rainfall {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}

		.description {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 8rpx;
		}

		.level {
			font-size: 24rpx;
			color: #999;
		}
	}

	.icon-container {
		margin-left: 20rpx;
	}
</style>